<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body id="cas">
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" class="mdc-card p-4 m-auto w-lg-100">
        <script>
            function jqueryReady() {
                document.forms[0].elements[0].focus();
            }
        </script>

        <h2 th:utext="#{cas.screen.acct.title}" />
        <p class="intro" th:utext="#{cas.screen.acct.intro}" />
                 
        <form method="post" id="fm1">
            <div class="banner banner-danger my-2" th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
                <p th:each="message : ${flowRequestContext.messageContext.allMessages}"
                   th:utext="${message.text}">Message Text</p>
            </div>


            <section th:each="entry : ${registrationProperties}" class="cas-field my-3">
                <div>
                    <label class="mdc-text-field mdc-text-field--outlined">
                        <input class="mdc-text-field__input"
                               th:id="${entry.name}"
                               th:name="${entry.name}"
                               size="25"
                               th:classappend="${entry.cssClass}"
                               th:type="${entry.type}"
                               th:attr="required=${entry.required ? 'true' : 'false'},pattern=${entry.pattern}"
                               autocapitalize="none"
                               th:title="#{${entry.title}}"
                               spellcheck="false"
                               th:autocomplete="${entry.name}"/>
                        <span class="mdc-notched-outline">
                            <span class="mdc-notched-outline__leading"></span>
                            <span class="mdc-notched-outline__notch">
                              <span class="mdc-floating-label" th:utext="#{${entry.label}}">Label</span>
                            </span>
                            <span class="mdc-notched-outline__trailing"></span>
                       </span>
                    </label>
                    <div class="mdc-text-field-helper-line" th:if="${entry.validationMessage != null}">
                        <div th:id="${'helpertext-' + entry.name}"
                             class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
                             aria-hidden="true">
                            <span th:if="${entry.validationMessage != null}"
                                  th:utext="#{${entry.validationMessage}}"></span>
                        </div>
                    </div>
                </div>

            </section>
            
            <span th:if="${accountRegistrationCaptchaEnabled}">
                <div th:replace="fragments/recaptcha :: recaptchaToken" />
            </span>
            
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="submit"/>
            <div class="form-actions d-flex justify-content-center">
                <button class="mdc-button mdc-button--raised mr-2"
                        name="submit"
                        th:value="#{cas.screen.acct.button.submit}"
                        id="submit"
                        accesskey="s">
                    <span class="mdc-button__label" th:value="#{cas.screen.acct.button.submit}">Submit</span>
                </button>
                &nbsp;
                <button class="mdc-button mdc-button--outlined"
                        name="cancel"
                        th:value="#{cas.screen.acct.button.cancel}"
                        accesskey="c"
                        id="cancel"
                        type="button"
                        onclick="location.href = location.href;">
                    <span class="mdc-button__label" th:text="#{cas.screen.acct.button.cancel}">CANCEL</span>
                </button>
            </div>
        </form>
    </div>


</main>
</body>
</html>
